<template>
  <view class="teamcenter">
    <orderTab :tabList="tabList" @submit="tabInfo" :type="type" v-if="isOrderTabVisible"></orderTab>  
    <view class="bgRadius orderInfo flex flex-align boxshadow" v-if="type!=10">
      <view class="flex-1">
        <view class="title">订单数量</view>
        <view class="nums">{{dataToatl.total}}</view>
      </view>
      <view class="flex-1">
        <view class="title">商品数量</view>
        <view class="nums">{{dataToatl.goods_num_total}}</view>
      </view>
      <view class="flex-1">
        <view class="title">总金额</view>
        <view class="nums">{{dataToatl.amount_total}}</view>
      </view>
    </view>
    <view class="shouhouInfo flex flex-align" v-else>
      <view @click="tabIndex(7)" :class="parme.status==7?'list active':'list'">待审核</view>
      <view @click="tabIndex(8)" :class="parme.status==8?'list active':'list'">处理中</view>
      <view @click="tabIndex(9)" :class="parme.status==9?'list active':'list'">已完成</view>
    </view>
    <view class="orderList" v-for="(item,index) in dataList" :key="index" v-if="dataList.length!=0">
      <view class="list bgRadius" @click="getDetail(item)">
        <view class="bianhao flex flex-align flex-bt">
          <view class="left flex flex-align">
            <radio v-if="type==4" color="#FE7431" @click.stop="selectCheck(item)" :checked="item.ischack"  style="transform: scale(.7);" />
            <view>
              <text>订单编号：</text>
              <text>{{item.order_no}}</text>
            </view>
          </view>
          <view class="right flex flex-align">
            {{item.order_status==2||item.order_status==3?'待配送':item.order_status==4?'待签收':item.order_status==5?'待核销':item.order_status==1?'已完成':'退款售后'}}
          </view>
        </view>
        <view class="shopList">
          <view class="shopItem flex flex-bt">
            <view class="left flex">
              <image :src="getImgUrl(item.goods_image)"  mode="scaleToFill" />
              <view class="flex flex-direction flex-bt">
                <view class="name">{{item.goods_name}}</view>
                <view class="text">
                  <view>
                    <text v-for="(its,ins) in item.goods_specs" :key="ins">{{its}} <text v-if="ins<(item.goods_specs.length-1)">,</text> </text>
                  </view>
                </view>
              </view>
            </view>
            <view class="right">
              <view class="price">
                <text v-if="item.goods_pay_currency_id==1">￥</text>
                {{item.order_amount}} 
                <text v-if="item.goods_pay_currency_id!=1">{{item.coinname}}</text>
              </view>
              <view class="number">x{{item.goods_num}}</view>
            </view>
          </view>
        </view>
        <view class="quanBao flex flex-align flex-end" v-if="item.return_coupon">
          <view class="right flex flex-align">
            <view class="name">{{item.return_coupon[0].name}}*{{item.return_coupon[0].num}}...</view>
            <view class="value">
              <uni-icons type="right" size="16" color="#fff"></uni-icons>
            </view> 
          </view>
        </view>
        <view class="orderbot">
          <view class="zhuangtai flex flex-align flex-line">
            <view class="name" v-if="item.goods_pay_currency_id==1">订单实付：<span >¥{{item.order_cash_amount}}</span> </view>
            <view class="name" v-if="item.goods_pay_currency_id!=1">
              订单实付：<span v-if="item.order_cash_amount!=0">{{item.order_cash_amount}}+</span> 
              <span>{{item.order_amount}}</span> 
              <span style="font-size: 20rpx;">{{ item.coinname }}</span>
            </view>
            <view class="name">下单时间：<span>{{ timestampToDateJian(item.order_created_at) }}</span></view>
            <view class="name">收货姓名：<span>{{item.pickup_name}}</span></view>
            <view class="name">联系方式：<span>{{item.pickup_phone}}</span></view>
          </view>
          <!-- <view class="flex flex-align flex-center">
            <view class="btns flex flex-align flex-center grey">申请退款</view>
            <view class="btns flex flex-align flex-center">立即支付</view>
          </view> -->
        </view>
      </view>
    </view>
    <view class="nodata" v-else style="padding-top: 10vh;">
      <noData acImg="/static/nodata/noshop.png" content="暂无数据" width="400rpx" color="#969799"></noData>
    </view>
    <view class="footAll" v-if="type==4">
      <view class="footallMian flex flex-align flex-bt">
        <view class="left flex flex-align">
          <view class="name">
            <radio @click="selectAll" color="#FE7431" :checked="ischackAll"  style="transform: scale(.8);" />
          </view>
          <view class="price">全选</view>
        </view>
        <view class="right flex flex-align">
          <view class="wenben">共{{selectNum}}笔</view>
          <view @click="submite" class="btns" :class="selectNum==0?'':'active'">批量签收</view>
        </view>
      </view>
      <view style="height:90rpx;"></view>
    </view>
    <TabBar :tabBarShow="1"></TabBar>
  </view>
</template>

<script setup lang="ts">
import { computed, reactive, ref, unref } from 'vue';
import TabBar from '@/components/TabBar/teamTabBar.vue'
import orderTab from './components/orderTab.vue';
import { getImgUrl, menuJump, timestampToDateJian } from '@/utils/tools';
import { orderSign, teamOrderList } from '@/api/user';
import { onShow,onUnload } from '@dcloudio/uni-app';
import { useAuthStore } from '@/stores/counter';
import noData from '@/components/noData.vue';
const type = ref(0)
const orderStore = useAuthStore();
const goodTypeList = computed(() => orderStore.confige.currency); // 商品类型
const statusType = {
  2:'待配送',
  3:'待配送',
  4:'待签收',
  5:'待核销',
  1:'已完成',
  7:'待审核',
  8:'售后中',
  9:'售后完成',
}
const tabList = ref([
    {
      id:0,
      name:'全部'
    },
    {
      id:3,
      name:'待配送'
    },
    {
      id:4,
      name:'待签收'
    },
    {
      id:5,
      name:'待核销'
    },
    {
      id:1,
      name:'已完成'
    },
    {
      id:10,
      name:'退款售后'
    },
  ])
  const parme = ref({
    page:1,
    size:10,
    status:0,
    goods_store:1,
    search_key:'',
    search_value:'',
  })
  const isOrderTabVisible = ref(true)
  onShow(() => {
    // 页面显示时显示 orderTab 组件
    isOrderTabVisible.value = true
  })

  onUnload(() => {
    // 页面卸载时隐藏 orderTab 组件
    isOrderTabVisible.value = false
  })

  function tabInfo(e: any){
    type.value = e.swIndex?Number(e.swIndex):0
    parme.value.page = 1
    if(type.value==10) {
      parme.value.status = 7
    }else {
      parme.value.status = e.swIndex?Number(e.swIndex):0
    }
    parme.value.goods_store = e.oTindex?Number(e.oTindex):1
    parme.value.search_key = e.search_key,
    parme.value.search_value = e.keyWord
    getOrderList()
  }
  
  function getDetail(e: { order_id: string; }) {
    menuJump({is_tab: false,link: '/pages/team/teamorderdetail?id='+e.order_id,link_type: 1})
  }
  const ischackAll = ref(false)
  function selectAll(){
    ischackAll.value = !ischackAll.value
    if(ischackAll.value){
      dataList.value.forEach((item:any) => {
        item.ischack = true
      });
    }else {
      dataList.value.forEach((item:any) => {
        item.ischack = false
      });
    }
    getSelectNum()
  }
  function selectCheck(e: any){
    e.ischack = !e.ischack
    let ischack = dataList.value.every((item:any) => item.ischack)
    ischackAll.value = ischack
    getSelectNum()
  }
  // 获取选中的总数
  const selectNum = ref(0)
  function getSelectNum() {
    selectNum.value = 0
    dataList.value.forEach((item:any) => {
      if(item.ischack) {
        selectNum.value++
      }
    });
  }
  // 获取团单列表
  const dataList =  ref<Recordable>([])
  const dataToatl = ref<Recordable>({})
  function getOrderList() {
    teamOrderList(parme.value).then((res: any) => {
      if (res) {
        res.data.forEach((item:any) => {
          item.coinname = unref(goodTypeList).find((v: { id: any; }) => v.id === item.goods_pay_currency_id)?.name
          item.ischack = false
        });
        if(parme.value.page==1) {
          dataList.value = res.data
        }else {
          dataList.value = dataList.value.concat(res.data)
        }
        dataToatl.value = res
        
      }
    })
  }
  function tabIndex(e: number) {
    parme.value.status = e
    parme.value.page = 1
    getOrderList()
  }
  function submite() {
    let ids = dataList.value.filter((item:any) => item.ischack).map((item:any) => item.order_id)
    if(ids.length==0) {
      return
    }
    orderSign({order_id:ids}).then((res:any)=>{
      if(res){
        uni.showToast({
          title: '提交成功',
          icon: 'none',
          duration: 1000
        })
        parme.value.page = 1
        getOrderList()
      }
    })
  }
</script>

<style scoped lang="scss"> 
.footallMian{
  position: fixed;bottom: 150rpx;left: 0;width: 100%;background: #fff;padding:18rpx 30rpx;box-sizing: border-box;border-bottom: 1px solid #F5F6F7;
  .right{
    .btns{background: #FFD9C7;padding: 12rpx 30rpx;border-radius: 60rpx;font-size: 24rpx;color:#fff ;}
    .wenben{font-size: 24rpx;color: #323233;margin-right: 20rpx;
      span{color: #FE4927;font-weight: bold;}
    }
    .btns.active{background: #FE7431;}
  }
}
.orderInfo{margin: 30rpx;border-radius: 16rpx;text-align: center;padding: 40rpx 0;
  .title{color: #969799;font-size: 26rpx;}
  .nums{font-size: 32rpx;color: #323233;margin-top: 6rpx;font-weight: bold;}
  .flex-1{position: relative;}
  .flex-1::after{content: '';position: absolute;right: 0;top: 50%;transform: translateY(-50%);width: 2rpx;height: 30rpx;background: #EAEAEA;}
  .flex-1:last-child::after{display: none;}
}
.shouhouInfo{
  margin: 30rpx 0;
  .list{color: #323233;font-size: 24rpx;padding: 8rpx 25rpx 12rpx;border-radius: 45rpx;margin-left: 30rpx;background: #fff;
  border: 1px solid #fff;font-weight: bold;}
 .list.active{color: #FE7431;background: #FFE8DD;border: 1px solid #FE7431;}
}
.orderList{padding:0rpx 20rpx;
  .list{
    .bianhao{
     .left{font-size: 26rpx;color: #969799;}
      .right{font-size: 26rpx;color: #FE7431;
      }
    }
    .quanBao{background:url('@/static/shop/shop05.png');border-radius: 50rpx;color: #fff;padding-left: 20rpx;margin:20rpx 0 0;
      background-size: 100% 100%;
      .flex{padding: 14rpx 10rpx 14rpx 0;
        .name{font-size: 24rpx;color: #fff;}
        .value{font-size: 24rpx;color: #FE7431;}
        }
      }
    .shopList{
      .shopItem{padding: 20rpx 0;
        .left{
          image{width: 170rpx;height: 170rpx;}
          .flex-direction{margin-left: 20rpx;
            .name{font-size: 28rpx;color: #333;width: 330rpx;font-weight: bold;}
            .text{font-size: 24rpx;color: #969799;margin-top: 10rpx;
            view{background: #F5F6F7;border-radius: 40rpx;padding: 4rpx 20rpx;display: inline-block;}
            }
          }
        }
        .right{text-align: right;font-weight: bold;
          .price{font-size: 32rpx;color: #323233;
            text{font-size: 24rpx;}
          }
          .number{font-size: 24rpx;color: #969799;margin-top: 10rpx;}
        }
      }
    }
   .orderbot{padding: 20rpx 0 0;
     .zhuangtai{font-size: 28rpx;color: #323233;
       .name{width: 50%;font-size: 24rpx;margin-top: 10rpx;color: #969799;
        span{color: #323233;}
        }
      }
      .btns{width: 250rpx;height: 60rpx;text-align: center;background: #FE7431;border-radius: 40rpx;color: #fff;margin:30rpx 20rpx 0;}
      .btns.grey{background: #EBEDF0;color: #323233;}
    }
  }
}

</style>